<template>
  <div class="comment-comp text-primary-500 w-full p-4">
    <div class="header-row flex justify-between">
      <div class="comment-cnt">{{ commentsCnt }}条评论</div>
    </div>

    <el-divider></el-divider>

    <div class="comment-container w-full flex justify-between items-start">
      <NcCompLoginAvatar :size="60" class="mt-2 mr-4"></NcCompLoginAvatar>
      <div class="flex-1">
        <div class="mb-4 flex justify-between items-center">
          <el-input
            v-model="inputContent"
            type="textarea"
            :autosize="{ minRows: 3 }"
            placeholder="快发表你独特的观点吧~"
          >
          </el-input>
        </div>

        <div class="comment-opers-row flex justify-between items-center mb-4">
          <div class="comment-feature">
            <span class="inline-flex items-center hidden lg:block">
              <i class="el-icon-warning-outline"></i>
              支持Markdown语法
            </span>
            <span></span>
          </div>

          <div class="comment-opers">
            <el-popover placement="top">
              <pre class="prose" v-html="previewComment"></pre>
              <el-button
                slot="reference"
                size="small"
                class="comment-oper oper-preview-btn ml-2"
              >
                预览
              </el-button>
            </el-popover>

            <el-button
              type="success"
              size="small"
              class="comment-oper oper-submit-btn ml-2"
              @click="submitComment"
            >
              留言
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <div v-if="commentsCnt === 0" class="footer-no-comments text-center">
      来做第一个留言的人吧！
    </div>

    <div v-else class="footer-comments">
      <NcCommentItem2
        v-for="(item, index) in comments"
        :key="index"
        :comment-id="item._id"
        class="mb-2"
      >
      </NcCommentItem2>
    </div>
    <NcLoginDialog ref="login" :modal="false"></NcLoginDialog>
    <NcEditDialog ref="edit" :modal="false"></NcEditDialog>
  </div>
</template>

<script>
import { ElDivider, ElButton, ElInput } from 'element-ui'
import md from 'marked'
import { mapState } from 'vuex'
import NcCommentItem2 from '@/components/comment-comp/NcCommentItem2'
import NcCompLoginAvatar from '@/components/login-comp/NcCompLoginAvatar'
import NcLoginDialog from '@/components/login-comp/NcLoginDialog'
import NcEditDialog from '@/components/login-comp/NcEditDialog'

export default {
  name: 'NcGitalk2',
  components: {
    NcEditDialog,
    NcLoginDialog,
    NcCompLoginAvatar,
    NcCommentItem2,
  },
  props: {
    userLoginStatus: {
      type: Number,
      default: 0,
    },
    documentId: {
      type: String,
      default: null,
    },
  },

  async fetch() {
    await this.fetchData()
  },

  data() {
    return {
      comments: [],
      inputContent: '',
      defaultUserNickname: '神秘游客',
      defaultUserAvatar:
        'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/1200px-Octicons-mark-github.svg.png',
      LoginDialogVisible: false,
    }
  },

  computed: {
    ...mapState(['user']),
    commentsCnt() {
      return this.comments.length
    },
    userNickname() {
      return this.user.nickname || this.defaultUserNickname
    },
    userAvatar() {
      return this.user.avatar || this.defaultUserAvatar
    },
    previewComment() {
      return md(this.inputContent.replace(/<script.*?script>/gims, ''))
    },
  },

  methods: {
    async fetchData() {
      console.log('fetching comments of document id: ', this.documentId)
      const comments = await this.$getComments({
        to_id: this.documentId,
        with_children: true,
      })
      this.$set(this, 'comments', comments)
    },
    async submitComment() {
      if (!this.inputContent) {
        return this.$message.error('你好像啥也没输入呢！')
      }

      if (!this.user.hasLogined) {
        this.$refs.login.handleOpen()
        return this.$message.error('登录后才可以发表评论哦~')
      }

      if (!this.user.avatar) {
        this.$refs.edit.handleOpen()
        return this.$message.error('有了头像后才可以发表评论哦~')
      }

      await this.$http.post(this.$api.apps.post.comment.add.path, {
        user_id: this.user.id,
        content: this.inputContent,
        to_id: this.documentId,
        is_document: true,
      })
      await this.fetchData()
      this.inputContent = ''
      this.$message.success('留言提交成功~')
    },
  },
}
</script>
